{% load staticfiles %}
<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>FinalProject|{{title}}</title>
        <link href="{% static 'css/bootstrap.css' %}" rel="stylesheet">
        <link href="{% static 'css/style.css' %}"  rel="stylesheet">
        <script src="{% static 'js/bootstrap.min.js' %}"></script>
        <script src="{% static 'js/jquery.min.js' %}"></script>
    </head>
    <body>
    <form action="" class="register" >
        <p>Register</p>
        <input type="text" id="nickname" placeholder="昵称" maxlength="30">
        <input type="text" id="email" placeholder="邮箱">
        <input type="password" id="pwd" placeholder="密码" maxlength="30">
        <input type="password" id="pwdagain" placeholder="确认密码" maxlength="30">
        <input type="file" id="headShot" placeholder="头像" accept="img">
        <!-- <input type="text" id="ic" placeholder="验证码">
        <button id="getic">获取验证码</button> -->
        <br>
        <a class="btn" id="login" href="/login/"><登录</a>
        <!-- <input type="submit"id="register" class="btn" value="注册"> -->
        <button type="button" id="register" class="btn">注册</button>
    </form>
    </body>
    <style>
    </style>
    <script>
        function ShowResult(data){
            if(data['status']!=1){
                alert(data['error']);
            }else{
                alert('success!');
            }
        }

        $('#register').click(function(){
            if(document.getElementById("pwdagain")!=document.getElementById("pwd")){
                alert("密码不一致！");
                return;
            }
            var formData = new FormData();
            formData.append('headShot', document.getElementById('headShot').files[0]);
            formData.append('nickname',$("#nickname").val());
            formData.append('email',$('#email').val());
            formData.append('pwd',$('#pwd').val());
            $.ajax({
                url:'/register/',
                type:'POST',
                data:formData,
                contentType: false,
                processData: false,
                dataType:'json',
                success:ShowResult,
            })
        })
    </script>
</html>